import { loginAPI } from "@/api/user"
import { getToken, setToken, removeToken } from '@/utils/auth'

export default {
  // 命名空间
  namespaced: true,

  // 模块内的state写法：官网推荐函数写法
  state: {
    token: getToken() || ''
  },
  mutations: {
    // mutations中的方法只有一种调用方式 store.commit（'mutations中的方法名'）
    setToken(state, newToken) {
      state.token = newToken
      setToken(newToken)
    },
    removeToken(state) {
      // 清空vuex中的token
      state.token = ''
      // 清空cookie中的token
      removeToken()
    }
  },
  actions: {
    async loginAction(store, data) {
      const res = await loginAPI(data)
      store.commit('setToken', res.data.token)
    }
  },
  getters: {

  },

}

// 适用语法：如何在组件中使用子模块的各个属性和方法
// 1.使用state中的数据
// 使用场景：如果组件中只有一处使用state中的数据，用$store方法
// 多出则用辅助函数
// this.$store.state.user.XXX
/**
 *  import {mapState} from 'vuex'
 *  computed: {
 *    ...mapState('模块名',['属性名1','属性名2',....])
 * }
 */

// 2.使用getters中的数据
// this.$store.getters['user/getters方法名']
/**
 *  import {mapGetters} from 'vuex'
 *  computed: {
 *    ...mapGetters('模块名',['getters方法名1','getters方法名2',....])
 * }
 */

// 3.使用mutations的方法
// this.$store.commit('模块名/方法名',参数)               (参数只能传一个)
/**
 *  import {mapMutations} from 'vuex'
 *  methods: {
 *    ...mapMutations('模块名',['方法名1','方法名2',....])
 * }
 */

// 4.使用actions的方法
// this.$store.dispatch('模块名/方法名',参数)               (参数只能传一个)
/**
 *  import {mapActions} from 'vuex'
 *  methods: {
 *    ...mapActions('模块名',['方法名1','方法名2',....])
 * }
 */
